<template>
	<div
		class="compButton nosel trans inline"
		:class="{ white: white != null, disabled }"
		@click="onClick"
	>
		<Fa v-if="icon" class="inline icon" :icon="icon" :spin="spin" />
		{{text}}
	</div>
</template>

<script>
	export default {
		props: {
			text: {
				type: [Number, String],
				default: ''
			},
			white: {
				type: String,
				default: null
			},
			icon: {
				type: [String, Array],
				default: null
			},
			spin: {
				type: [Boolean],
				default: false
			},
			disabled: {
				type: [Boolean],
				default: false
			}
		},
		data() {
			return {};
		},
		methods: {
			onClick(e) {
				this.$emit('click', e);
			}
		}
	};
</script>

<style scoped>
	.compButton {
		box-sizing: border-box;

		height: auto;

		padding: 0px 10px;

		border: 1px solid transparent;

		border-radius: 4px;

		background: #13579b;

		text-align: center;

		cursor: pointer;
	}
	.compButton.white {
		background: snow;

		color: #13579b;
	}
	.compButton.disabled {
		cursor: default;

		background: #343f58;

		color: gray;
	}
	.compButton:not(.white):not(.disabled):hover {
		background: steelblue;

		box-shadow: 1px 1px 4px -1px #13579b;
	}

	.compButton>.icon {
		position: relative;

		top: 1px;

		height: 100%;
	}
</style>